<template>
  <el-container class="word-content-detail" v-loading="loading">
    <el-header class="header">
      <div class="header-l">
        <el-icon color="#2263BF"><Operation /></el-icon>
        <span class="text">详情</span>
      </div>
      <div class="header-r">
        <el-button
          class="panel-btn"
          color="#2263BF"
          type="primary"
          @click="downfile"
          >下载到本地</el-button
        >
        <el-button
          class="panel-btn"
          color="#2263BF"
          type="primary"
          @click="goback"
          >返回</el-button
        >
      </div>
    </el-header>
    <el-main>
      <el-container>
        <el-main>
          <el-container>
            <el-main class="container bc-table">
              <iframe
                width="100%"
                height="100%"
                :src="props.currentData.viewUrl"
              ></iframe>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-main>
    <SelfDialog
      :dialogVisable="dialogVisable"
      height="320px"
      title="提示"
      @close="close"
      @confirm="confirm"
    >
      <template #default>
        <div class="center_content">
          <img class="icon-img" src="../../../assets/images/gth.png" />
          <p class="text">是否下载？</p>
        </div>
      </template>
    </SelfDialog>
  </el-container>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getYwflList, delfl, updatefl } from "@/api/ywflgl";
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Minxfun } from "@/utils/minxin";
import SelfDialog from "@/components/dialog/dialog.vue";
const { formatDateTime } = Minxfun();
const router = useRouter();
const emit = defineEmits(["close"]);
let dialogVisable = ref(false)

const props = defineProps({
  currentData: Object,
});

onMounted(() => {});

let loading = ref(false);

const goback = () => {
  emit("close");
};

// 取消下载
const close = () => {
  dialogVisable.value = false;
};

const downfile = () => {
  dialogVisable.value = true;
  // window.open(props.currentData.viewUrl);
};
// 确认删除
const confirm = async () => {
  try {
    window.open(props.currentData.viewUrl);
    // const a = document.createElement('a');
    // a.href = props.currentData.viewUrl;
    // a.download =  'downloaded-file';
    // document.body.appendChild(a);
    // a.click();
    // document.body.removeChild(a);
    ElMessage({
      message: "下载成功",
      type: "success",
    });
    dialogVisable.value = false;
  } catch (e) {
    console.error(e);
  }
};
</script>

<style lang="scss" scoped>
.word-content-detail {
  width: 100%;
  height: 100%;
  .header {
    min-height: 36px;
    line-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 18px;
    .header-l {
      display: flex;
      align-items: center;
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        letter-spacing: 1px;
        text-align: left;
        padding-left: 14px;
      }
    }
    .header-r {
      .panel-btn {
        width: 100px;
        height: 36px;
        line-height: 36px;
        box-sizing: border-box;
      }
    }
  }
  .container {
  }
}
.el-container {
  height: 100% !important;
  padding: 0 !important;
}
.el-header {
  height: auto !important;
  min-height: 36px !important;
}
.el-main {
  padding: 0 !important;
}
.ruleForm {
  margin: 0 50px;
}
</style>

<style>
.el-form-item__label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
}
</style>
